<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>导航</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style>
			html,
			body {
				height: 100%;
				width: 100%;
				background-color: #FFFFFF;
			}
			
			#wrap {
				height: 100%;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-flex-flow: column;
				flex-flow: column;
			}
			
			#main {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			
			.mui-bar {
				/*height: auto;*/
			}
			
			ul {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
			}
			
			.topbar {
				display: none;
				line-height: 45px;
				text-align: center;
			}
			
			.activebar {
				display: block;
			}
			
			#seachbox {
				width: 70%;
				position: relative;
				left: 8%;
				margin: 6px auto;
				display: inline-block;
				height: 30px;
				border: 1px solid #E2E2E4;
				border-radius: 15px;
				float: left;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<header class="mui-bar mui-bar-nav" id="header">
				<div id="cloud" class="activebar topbar">
					<a class="mui-icon mui-icon-bars mui-pull-left slidelayout"></a>
					<div id="seachbox"> </div>
					<a class="mui-icon mui-icon-search mui-pull-right" id="search"></a>
				</div>
				<div id="client" class="topbar">
					<a class="mui-icon mui-icon-bars mui-pull-left slidelayout"></a>
					<h1 class="mui-title">章节练习</h1>
				</div>
				<div id="dev" class="topbar">
					<a class="mui-icon mui-icon-bars mui-pull-left slidelayout"></a>
					<h1 class="mui-title">预测试题</h1>
				</div>
				<div id="doc" class="topbar">
					<a class="mui-icon mui-icon-bars mui-pull-left slidelayout"></a>
					<h1 class="mui-title">行业动态</h1>
					
				</div>
			</header>
			<div id="main">
			</div>
			<nav class="mui-bar mui-bar-tab" id="footer">
				<a class="mui-tab-item mui-active" onclick="randomSwitchBtn(this,'cloud',0)">
		        	   课堂学习
			    </a>
				<a class="mui-tab-item" onclick="randomSwitchBtn(this,'client',1)">
			       章节练习
			    </a>
				<a class="mui-tab-item" onclick="randomSwitchBtn(this,'dev',2)">
			        预测试题
			    </a>
				<!--iOS版本屏蔽-->
				<a class="mui-tab-item" onclick="randomSwitchBtn(this,'doc',3)">
			         招考就业
			    </a>
			</nav>
		</div>
	</body>
	<!--<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>-->
	<script type="text/javascript" src="../script/api.js"></script>
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function openSearchResult(text) {
			var data = {
				text: text
			}
			api.openWin({
				name: 'search',
				url: 'search.html',
				pageParam: data
			});
		}

		function openUrl() {
			api.openWin({
				name: 'win',
				url: 'win.html',
				pageParam: {
					url: "http://ruiyinedu.zhan.cnzz.net/yuanchengdianda.html",
					purl:"http://ruiyinedu.zhan.cnzz.net/",
					title:"招考就业"
				}
			});
		}

		function openSearch() {
			var obj = api.require('UISearchBar');
			obj.open({
				placeholder: '请输入搜索关键字',
				historyCount: 10,
				showRecordBtn: false,
				texts: {
					cancelText: '取消',
					clearText: '清除搜索记录'
				},
				styles: {
					navBar: {
						bgColor: '#FFFFFF',
						borderColor: '#ccc'
					},
					searchBox: {
						bgImg: '',
						color: '#000',
						height: 44
					},
					cancel: {
						bg: 'rgba(0,0,0,0)',
						color: '#D2691E',
						size: 16
					},
					list: {
						color: '#696969',
						bgColor: '#FFFFFF',
						borderColor: '#eee',
						size: 16
					},
					clear: {
						color: '#000000',
						borderColor: '#ccc',
						size: 16
					}
				}
			}, function(ret) {
				if (ret.eventType == 'search') {
					openSearchResult(ret.text);
				} else if (ret.eventType == 'history') {
					openSearchResult(ret.text);
				} else {
					openSearchResult(ret.text);
				}
			});
		}
		apiready = function() {
				var header = $api.byId('header');
				$api.fixIos7Bar(header);
				var main = $api.byId('main');
				var footer = $api.byId('footer');
				var header_h = $api.offset(header).h;
				var main_h = $api.offset(main).h;
				var footer_h = $api.offset(footer).h;
				//      var rect_h = "600";
				var rect_h = main_h - header_h - footer_h;
				api.setWinAttr({
					bounces: false
				});
				api.openFrameGroup({
					name: 'group',
					scrollEnabled: false,
					rect: {
						x: 0,
						y: header_h,
						w: 'auto',
						h: rect_h
					},
					preload:0,
					index: 0,
					frames: [{
							name: 'home',
							bgColor: "#fff",
							url: 'main.html'
						}, {
							name: 'practiselist-tab',
							bgColor: "#fff",
							url: 'practiselist-con.html'
						}, {
							name: 'yuce',
							url: 'testlist-con.html',
							bgColor: "#fff",
							pageParam: {
								type: "pay"
							}
						}
						//iOS版本屏蔽
						, {
							name: '招考就业',
							bgColor: "#fff",
							url: 'news.html'
						}
					]
				}, function(ret, err) {});
				api.setFrameAttr({
					name: 'root',
					bounces: false,
					bgColor: '#fff'
				});
				var slidelayout = document.getElementsByClassName('slidelayout');
				var slidelength = slidelayout.length;
				for (var i = 0; i < slidelength; i++) {
					slidelayout[i].addEventListener('click', function() {
//						api.openSlidPane({
//							type: 'left'
//						});
						api.openDrawerPane({
						    type: 'left'
						});
					});
				};
				document.getElementById("seachbox").addEventListener('click', function() {
					openSearch();
				});
				document.getElementById("search").addEventListener('click', function() {
					openSearch();
				});
				api.addEventListener({
					name: 'keyback'
				}, function(ret, err) {
					api.setFrameAttr({
						name: 'mask',
						hidden: true
					});
					api.closeWidget();
				});
				api.addEventListener({
					name: 'SlidLayout'
				}, function(ret, err) {
					api.openFrame({
						bounces: false,
						bgColor: 'rgba(0,0,0,0.2)',
						name: 'mask',
						url: 'mask.html',
						rect: {
							x: 0,
							y: 0,
							w: api.winWidth,
							h: api.winHeight
						}
					});
				});
				api.addEventListener({
					name: 'SlidClose'
				}, function(ret, err) {
					api.setFrameAttr({
						name: 'mask',
						hidden: true
					});
				});
			}
			// 随意切换按钮
		function randomSwitchBtn(obj, name, index) {
			if(index==3){
				api.setFrameGroupAttr({
				    name: 'top_tab',
				    hidden: false
				});
			}else{
				api.setFrameGroupAttr({
				    name: 'top_tab',
				    hidden: true
				});
			}
			var $header = $api.byId('header');
			var $titleBar = $api.domAll($header, '.topbar');
			for (var i = 0; i < $titleBar.length; i++) {
				$api.removeCls($titleBar[i], 'activebar');
			}
			$api.addCls($api.byId(name), 'activebar');
			var $footer = $api.byId('footer');
			var $footerBar = $api.domAll($footer, 'a');
			for (var j = 0; j < $footerBar.length; j++) {
				$api.removeCls($footerBar[j], 'mui-active');
			}
			$api.addCls(obj, 'mui-active');
			api.setFrameGroupIndex({
				name: 'group',
				index: index
			});
		}
	</script>

</html>